<template lang="pug">
  .m-content
    .header {{name}}变更地址段
    .main
      el-form(:model="ruleForm" ref="ruleForm" :rules="rules" label-width="200px" class="special-form")
        el-form-item(label="客户侧地址段(old值)")
          el-input(v-model="ruleForm.oldUserAddrSeg" :disabled="true")
        el-form-item(label="客户侧地址段" prop="userAddrSeg")
          el-input(v-model="ruleForm.userAddrSeg")
        el-form-item(label="客户侧地址段掩码(old值)")
          el-input(v-model="ruleForm.oldUserAddrSegMask" :disabled="true")
        el-form-item(label="客户侧地址段掩码" prop="userAddrSegMask")
          el-input(v-model="ruleForm.userAddrSegMask")
        el-form-item(label="客户侧互联地址段" v-show="showing")
          el-input(v-model="ruleForm.userLinkCidr" :disabled="true")
        el-form-item(label="云侧互联地址段" v-show="showing")
          el-input(v-model="ruleForm.dcAddrCidr" :disabled="true")
        el-form-item(label="云主机地址段" v-show="showing")
          el-input(v-model="ruleForm.dcSegmentCidr" :disabled="true")
        el-form-item(label="云内互联地址段" v-show="showing")
          el-input(v-model="ruleForm.dcInnerLinkCidr" :disabled="true")
        el-form-item
          el-button(class="moreBtn" type="text" @click="showForm") 更多
            i(class="el-icon--right" :class="moreIcon")
        el-form-item(class="btns")
          el-button(type="primary" @click="submitForm('ruleForm')") 确定
          el-button(@click="cnacel") 取消
</template>
<script>
import { specialcloud } from '@/api/resource'
export default {
  data () {
    return {
      showing: false,
      name: '',
      moreIcon: 'el-icon-arrow-down',
      ruleForm: {
        oldUserAddrSeg: '',
        userAddrSeg: '',
        oldUserAddrSegMask: '',
        userAddrSegMask: '',
        userLinkCidr: '',
        dcAddrCidr: '',
        dcSegmentCidr: '',
        dcInnerLinkCidr: ''
      },
      rules: {
        userAddrSeg: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              var regExp = /^((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}){1}([,;，；](1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3})*$/
              if (value === '') {
                callback(new Error('支持多个,多个地址使用逗号或分号分隔(全角、半角均可)'))
              } else if (!regExp.test(value)) {
                callback(new Error('请输入正确的IP格式'))
              } else {
                callback()
              }
            }
          }
        ],
        userAddrSegMask: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              var regExp = /^((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3}){1}([,;，；](1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])(\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)){3})*$/
              if (value === '') {
                callback(new Error('支持多个,多个地址使用逗号或分号分隔(全角、半角均可)'))
              } else if (!regExp.test(value)) {
                callback(new Error('请输入正确的IP格式'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.getForm()
  },
  methods: {
    // 获取表格数据
    getForm () {
      this.name = this.$route.query.id
      let data = {
        accessNumber: this.$route.query.id
      }
      specialcloud.call(this, 'post', '/queryVpnDetail', data, '').then(({ data }) => {
        let datas = JSON.parse(data.data.params)
        this.ruleForm.oldUserAddrSeg = datas.user_addr_seg.toString()
        this.ruleForm.oldUserAddrSegMask = datas.user_addr_seg_mask.toString()
        this.ruleForm.dcAddrCidr = datas.dcAddrCidr.toString()
        this.ruleForm.userLinkCidr = datas.userLinkCidr.toString()
        this.ruleForm.dcSegmentCidr = datas.dcSegmentCidr.toString()
        this.ruleForm.dcInnerLinkCidr = datas.dcInnerLinkCidr.toString()
      })
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            accessNumber: this.$route.query.id,
            oldUserAddrSeg: this.ruleForm.oldUserAddrSeg.toString(),
            userAddrSeg: this.ruleForm.userAddrSeg,
            oldUserAddrSegMask: this.ruleForm.oldUserAddrSegMask.toString(),
            userAddrSegMask: this.ruleForm.userAddrSegMask
          }
          specialcloud.call(this, 'post', '/vpn/changeUserAddress', data, '').then(({ data }) => {
            if (data.code === 0) {
              this.$message.success('变更地址段下单成功')
              this.$router.push('/resource/ResourceMain/SpecialCloud')
            } else {
              this.$message.error(data.message)
            }
          })
        } else {
          return false
        }
      })
    },
    // 表单展开
    showForm () {
      if (this.showing === false) {
        this.showing = true
        this.moreIcon = 'el-icon-arrow-up'
      } else {
        this.moreIcon = 'el-icon-arrow-down'
        this.showing = false
      }
    },
    // 取消按钮
    cnacel () {
      history.go(-1)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .m-content
    font-size 12px
    .header
      height 40px
      line-height @height
      padding 0 20px
      border-bottom 1px solid #e8e8e8
      color #333
    .main
      margin 23px
      .special-form
        width 521px
        .moreBtn
          color #409eff
      >>>
        .el-form-item__label
          font-size 12px
</style>
